$(function () {
    var btn_list = document.querySelector(".btn-list")
    window.onscroll = function () {

        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(scrollTop);
        if (scrollTop > 300) {
            btn_list.style.position = "fixed"
        } else {
            btn_list.style.position = "static"
        }

    }
    let top_list = [0, 660, 1100, 6174, 0];
    $(".btn-list li").click(function () {
        changeClass.call(this);
        var index = $(this).index(".btn-list li");
        changeScrollTop(index);
    })
    function changeClass() {
        $(this)
            .addClass("active")
            .siblings()
            .removeClass("active")

    }
    function changeScrollTop(index) {
        $("body,html")
            .stop(true)
            .animate({
                scrollTop: top_list[index]
            })
    }
    $(window).scroll(function () {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        if (scrollTop > 0 && scrollTop < 100) {

            $(".btn-list li")
                .removeClass("active")
                .eq(0)
                .addClass("active")

        }
        if (scrollTop >= 100 && scrollTop <= 520) {

            $(".btn-list li")
                .removeClass("active")
                .eq(1)
                .addClass("active")

        }
        if (scrollTop >= 520 && scrollTop <= 5697) {

            $(".btn-list li")
                .removeClass("active")
                .eq(2)
                .addClass("active")

        }
        if (scrollTop > 5697 && scrollTop < 6174) {

            $(".btn-list li")
                .removeClass("active")
                .eq(3)
                .addClass("active")

        }

    })





})